<template>
	<view class="page">

		<image class="topbg" src="@/static/home/bgtop.png"></image>
		<view class="top" @click="$goBack(2,'/bundle/pages/personalcenter/personalcenter')">
			<image src="/static/0240111094721.png"></image>
			<view>
				<view class="name">{{carlist.nickName}}</view>
				<view>{{carlist.firmName}}</view>
			</view>
		</view>

		<view class="bg order">
			<view class="order-top">
				<view style="display: flex;" @click="eye=!eye">
					<view class="order-name">我的资产</view>
					<u-icon name="eye" color="#906600" v-if="eye"></u-icon>
					<u-icon name="eye-fill" color="#906600" v-else></u-icon>
				</view>
			</view>
			<view class="list">
				<view class="col">
					<view>余额</view>
					<view class="writing" v-if="eye">{{asset.balance||0}}元</view>
					<view class="writing" v-else>***元</view>
				</view>
				<view class="col">
					<view>本周支出</view>
					<view class="writing" v-if="eye">{{asset.thisWeekOut||0}}元</view>
					<view class="writing" v-else>***元</view>
				</view>
				<view class="col">
					<view>本月支出</view>
					<view class="writing" v-if="eye">{{asset.thisMonthOut||0}}元</view>
					<view class="writing" v-else>***元</view>
				</view>
			</view>
		</view>

		<view class="detail">
			<view class="detail-name">车辆概况</view>
			<view class="detail-list">
				<view class="li" @click="$goBack(2,'/bundle/pages/vehiclemanagement/vehiclemanagement')">
					<view style="display: flex;">
						<image src="../../static/my/c.png"></image>
						<view class="li-name">车辆管理</view>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="li" @click="$goBack(2,'/bundle/pages/transactiondetails/transactiondetails')">
					<view style="display: flex;">
						<image src="../../static/my/f.png"></image>
						<view class="li-name">查看账单</view>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="li" @click="ph">
					<view style="display: flex;">
						<image src="../../static/my/qu.png"></image>
						<view class="li-name">我的管家</view>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>

				<view class="li" style="border: none;">
					<view style="display: flex;">
						<image src="../../static/my/t.png"></image>
						<view class="li-name">分享小程序</view>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<button class="shareBtn" type="default" data-name="shareBtn" open-type="share">分享</button>
			</view>
		</view>
		<view style="margin-top:100rpx; visibility: hidden;">1</view>

		<u-tabbar :value="value1" :fixed="true" :placeholder="false" :safeAreaInsetBottom="false"
			activeColor="#F7B530">
			<u-tabbar-item text="首页" @click="homes">
				<image class="u-page__item__slot-icon" slot="active-icon" src="/static/tabber/home.png"></image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="/static/tabber/home-t.png"></image>
			</u-tabbar-item>
			<u-tabbar-item text="我的" @click="my">
				<image class="u-page__item__slot-icon" slot="active-icon" src="/static/tabber/my.png"></image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="/static/tabber/my-t.png"></image>
			</u-tabbar-item>
		</u-tabbar>
	</view>

</template>

<script>
	import {
		apigetCompanyAssetInfoById,
		apitgetById
	} from '@/api/app.js'

	export default {
		data() {
			return {
				carlist: {},
				value1: 1,
				avrat: 0,
				form: {
					name: '哈哈哈'
				},
				asset: {
					balance: 0,
					thisMonthOut: 0,
					thisWeekOut: 0
				},
				eye: true,
				home: ""

			}
		},
		onShow() {
			this.avrat = uni.getStorageSync("type")
		},
		onLoad() {
			if (uni.getStorageSync('type') == "") {
				uni.redirectTo({
					url: "/pages/login/login"
				})
			}
			this.home = uni.getStorageSync("type")
			this.CarByUser()
			this.CompanyAssetInfoById()
		},
		methods: {
			ph() {
				uni.makePhoneCall({
					// 手机号 这里可以直接写号码如 12345 也可以写获取号码的字段如this.mobile
					phoneNumber: "1223456447",
					// 成功回调
					success: (res) => {
						console.log('调用成功!')
					},
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
					}
				});
			},
			CompanyAssetInfoById() {
				let id = uni.getStorageSync('businessId')
				apigetCompanyAssetInfoById(id).then((res) => {
					this.asset = res.data;
					console.log(res)
				})
			},
			CarByUser() {
				let id = uni.getStorageSync('userId')
				apitgetById(id).then((res) => {

					if (res.data.id != "") {
						uni.setStorageSync('caruser', res.data)
						this.add = true
						this.carlist = res.data
						console.log(this.carlist, 99)
					}
				})
			},
			click1(e) {
				this.value1 = e
				console.log('click1', e);
			},
			homes() {
				uni.reLaunch({
					url: "/pages/homeBoss/homeBoss"
				})
			},
			my() {
				uni.reLaunch({
					url: "/pages/myBoss/myBoss"
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.u-page__item__slot-icon {
		width: 50rpx;
		height: 50rpx;
	}

	.page {
		position: relative;

		.topbg {
			z-index: -1;
			position: absolute;
			top: 0;
			width: 100vw;
			height: 424rpx;
		}

		.top {
			padding: 180rpx 40rpx;
			font-size: 28rpx;
			display: flex;

			image {
				width: 108rpx;
				height: 108rpx;
				border-radius: 50%;
				border: 1rpx solid #fff;
				margin-right: 20rpx;
			}

			.name {
				font-size: 38rpx;
				font-weight: 600;
				margin-bottom: 6rpx;
			}
		}

		.bg {
			background: linear-gradient(#FFF3CE 0%, #fff 100%);
		}

	}

	.order {

		box-shadow: 0px 4rpx 8rpx 0px rgba(225, 225, 225, 0.44);
		margin: -130rpx 10px 10px 17rpx;
		padding: 20rpx 20rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		height: 200rpx;

		.order-top {
			.order-name {
				font-size: 32rpx;
				font-weight: 600;
				margin-right: 10rpx;
			}

			.bill {
				font-size: 24rpx;
				color: #666666;
			}

		}

		.list {
			margin-top: 18rpx;

			@include flex(row, space-between, center) .col {
				margin: 18rpx 30rpx 0rpx 20rpx;
				margin-top: 18rpx;

				view {
					font-size: 24rpx;
					color: #666666;
				}

				.writing {
					margin-top: 10rpx;
					font-size: 32rpx;
					color: #000000;
					font-weight: 600;
				}
			}
		}
	}

	.detail {
		background-color: #fff;
		box-shadow: 0px 4rpx 8rpx 0px rgba(225, 225, 225, 0.44);
		margin: 30rpx 10px 60px 17rpx;
		padding: 20rpx 20rpx;
		box-sizing: border-box;
		border-radius: 20rpx;



		.detail-name {
			font-size: 32rpx;
			font-weight: 600;
		}

		.detail-list {
			margin: 0rpx 10rpx;
			position: relative;

			.shareBtn {
				bottom: 20rpx;
				width: 100%;
				position: absolute;
				opacity: 0;
			}

			.li {
				border-bottom: solid 2rpx #d8d8d8;
				height: 112rpx;

				@include flex(row, space-between, center) image {
					width: 48rpx;
					height: 48rpx;
				}



				.li-name {
					margin-left: 20rpx;
					font-size: 30rpx;
					margin-top: 2rpx;
				}

			}
		}




	}
</style>